<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招聘职位 - 创界科技</title>
    <style>
        /* 基础样式与变量定义 - 与主站保持一致 */
        :root {
            --primary: #FF6B6B;
            --secondary: #4ECDC4;
            --accent: #FFE66D;
            --dark: #292F36;
            --light: #F7FFF7;
            --border-width: 4px;
            --shadow-offset: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
        }

        body {
            background-color: var(--light);
            color: var(--dark);
            padding: 20px;
            line-height: 1.6;
        }

        /* 新野蛮主义核心样式类 */
        .neu-card {
            border: var(--border-width) solid var(--dark);
            border-radius: 12px;
            background-color: white;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
            transition: all 0.2s ease;
        }

        .neu-card:hover {
            transform: translate(2px, 2px);
            box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0px var(--dark);
        }

        .neu-button {
            display: inline-block;
            padding: 12px 24px;
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            background-color: var(--primary);
            color: var(--dark);
            font-weight: bold;
            text-decoration: none;
            box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--dark);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .neu-button:hover {
            transform: translate(2px, 2px);
            box-shadow: calc(var(--shadow-offset) - 2px) calc(var(--shadow-offset) - 2px) 0px var(--dark);
        }

        .neu-button.secondary {
            background-color: var(--secondary);
        }

        .neu-button.accent {
            background-color: var(--accent);
        }

        /* 布局样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            margin-bottom: 40px;
            border-bottom: var(--border-width) solid var(--dark);
        }

        .logo {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary);
            text-shadow: 3px 3px 0px var(--dark);
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 20px;
        }

        nav a {
            text-decoration: none;
            color: var(--dark);
            font-weight: bold;
            padding: 8px 16px;
            border: var(--border-width) solid transparent;
            transition: all 0.2s ease;
        }

        nav a:hover {
            border: var(--border-width) solid var(--dark);
            background-color: var(--accent);
        }

        section {
            margin-bottom: 80px;
        }

        .section-title {
            font-size: 2.5rem;
            margin-bottom: 40px;
            text-align: center;
            position: relative;
        }

        .section-title::after {
            content: "";
            display: block;
            width: 100px;
            height: 5px;
            background-color: var(--primary);
            margin: 15px auto 0;
        }

        /* 招聘页面特定样式 */
        .careers-hero {
            text-align: center;
            padding: 60px 40px;
            margin-bottom: 60px;
        }

        .careers-hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
        }

        .careers-hero p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 30px;
        }

        .careers-filters {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .filter-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 10px 20px;
            border: var(--border-width) solid var(--dark);
            border-radius: 6px;
            background-color: white;
            color: var(--dark);
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .filter-btn.active {
            background-color: var(--primary);
        }

        .filter-btn:hover:not(.active) {
            background-color: var(--accent);
        }

        .search-box {
            display: flex;
            max-width: 400px;
            width: 100%;
        }

        .search-input {
            flex: 1;
            padding: 12px 16px;
            border: var(--border-width) solid var(--dark);
            border-right: none;
            border-radius: 8px 0 0 8px;
            font-size: 1rem;
        }

        .search-button {
            padding: 12px 20px;
            border: var(--border-width) solid var(--dark);
            border-radius: 0 8px 8px 0;
            background-color: var(--secondary);
            color: var(--dark);
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .search-button:hover {
            background-color: var(--accent);
        }

        .jobs-list {
            display: grid;
            gap: 30px;
            margin-bottom: 60px;
        }

        .job-item {
            padding: 30px;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 20px;
            align-items: center;
        }

        .job-info h3 {
            margin-bottom: 10px;
            font-size: 1.5rem;
        }

        .job-meta {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
            color: #666;
            font-size: 0.9rem;
            flex-wrap: wrap;
        }

        .job-tag {
            display: inline-block;
            padding: 4px 10px;
            background-color: var(--accent);
            border: var(--border-width) solid var(--dark);
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-right: 8px;
            margin-bottom: 5px;
        }

        .job-department {
            background-color: var(--secondary);
        }

        .job-type {
            background-color: var(--primary);
            color: var(--light);
        }

        .job-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            min-width: 150px;
        }

        .job-detail {
            display: none;
            padding: 30px;
            margin-top: 20px;
        }

        .job-detail.active {
            display: block;
        }

        .job-description h4 {
            margin: 20px 0 10px;
            font-size: 1.2rem;
            color: var(--primary);
        }

        .job-description ul,
        .job-description ol {
            margin-left: 20px;
            margin-bottom: 15px;
        }

        .job-description li {
            margin-bottom: 8px;
        }

        .application-form {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }

        .form-control {
            width: 100%;
            padding: 12px 16px;
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            font-size: 1rem;
            background-color: white;
        }

        .form-control:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--accent);
        }

        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

        .file-upload {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .file-upload-input {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }

        .file-upload-label {
            display: block;
            padding: 12px 16px;
            border: var(--border-width) solid var(--dark);
            border-radius: 8px;
            background-color: white;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .file-upload-label:hover {
            background-color: var(--accent);
        }

        .benefits {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 60px;
        }

        .benefit-card {
            padding: 25px;
            text-align: center;
        }

        .benefit-icon {
            width: 80px;
            height: 80px;
            background-color: var(--accent);
            border: var(--border-width) solid var(--dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 2rem;
            font-weight: bold;
        }

        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 40px;
        }

        .page-btn {
            padding: 10px 16px;
            border: var(--border-width) solid var(--dark);
            border-radius: 6px;
            background-color: white;
            color: var(--dark);
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .page-btn.active {
            background-color: var(--primary);
        }

        .page-btn:hover:not(.active) {
            background-color: var(--accent);
        }

        /* 页脚样式优化 - 与主站保持一致 */
        footer {
            text-align: center;
            padding: 40px 0;
            border-top: var(--border-width) solid var(--dark);
            margin-top: 40px;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin: 20px 0;
        }

        .footer-links a {
            color: var(--dark);
            text-decoration: none;
            font-weight: bold;
        }

        .footer-links a:hover {
            text-decoration: underline;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .careers-filters {
                flex-direction: column;
                align-items: flex-start;
            }

            .job-item {
                grid-template-columns: 1fr;
            }

            .job-actions {
                flex-direction: row;
                justify-content: flex-start;
            }

            .benefits {
                grid-template-columns: 1fr;
            }

            header {
                flex-direction: column;
                gap: 20px;
            }

            nav ul {
                flex-wrap: wrap;
                justify-content: center;
            }

            .footer-links {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div class="logo">创界科技</div>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="products.html">产品</a></li>
                    <li><a href="services.html">服务</a></li>
                    <li><a href="news.html">新闻动态</a></li>
                    <li><a href="team.html">团队</a></li>
                    <li><a href="careers.html"
                            style="border: var(--border-width) solid var(--dark); background-color: var(--accent);">招聘</a>
                    </li>
                    <li><a href="contact.html">联系我们</a></li>
                    <li><a href="job.html">岗位招聘</a></li>
                </ul>
            </nav>
        </header>

        <section class="careers-hero">
            <h1>加入创界科技</h1>
            <p>我们正在寻找有才华、有激情的人才加入我们的团队，共同推动企业数字化转型，创造更美好的未来。</p>
            <a href="#open-positions" class="neu-button">查看职位</a>
        </section>

        <section>
            <h2 class="section-title">为什么选择创界科技</h2>
            <div class="benefits">
                <div class="benefit-card neu-card">
                    <div class="benefit-icon">成</div>
                    <h3>成长空间</h3>
                    <p>提供完善的职业发展路径和培训机会，帮助员工实现个人和职业成长。</p>
                </div>
                <div class="benefit-card neu-card">
                    <div class="benefit-icon">创</div>
                    <h3>创新文化</h3>
                    <p>鼓励创新思维，提供资源支持员工尝试新技术和解决方案。</p>
                </div>
                <div class="benefit-card neu-card">
                    <div class="benefit-icon">福</div>
                    <h3>优厚福利</h3>
                    <p>具有竞争力的薪酬待遇、弹性工作制和全面的健康保险计划。</p>
                </div>
            </div>
        </section>

        <section id="open-positions">
            <h2 class="section-title">开放职位</h2>

            <div class="careers-filters">
                <div class="filter-group">
                    <button class="filter-btn active" data-filter="all">全部职位</button>
                    <button class="filter-btn" data-filter="technology">技术类</button>
                    <button class="filter-btn" data-filter="product">产品类</button>
                    <button class="filter-btn" data-filter="design">设计类</button>
                    <button class="filter-btn" data-filter="business">商务类</button>
                </div>

                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索职位...">
                    <button class="search-button">搜索</button>
                </div>
            </div>

            <div class="jobs-list">
                <!-- 职位1 -->
                <div class="job-item neu-card" data-category="technology">
                    <div class="job-info">
                        <h3>高级全栈工程师</h3>
                        <div class="job-meta">
                            <span class="job-tag job-department">技术部</span>
                            <span class="job-tag">北京</span>
                            <span class="job-tag job-type">全职</span>
                            <span>发布日期: 2023-10-15</span>
                        </div>
                        <p>负责公司核心产品的全栈开发，参与系统架构设计和性能优化。</p>
                    </div>
                    <div class="job-actions">
                        <button class="neu-button view-details" data-job="job1">查看详情</button>
                        <button class="neu-button secondary apply-now" data-job="job1">立即申请</button>
                    </div>
                    <div class="job-detail" id="job1">
                        <div class="job-description">
                            <h4>职位描述</h4>
                            <p>我们正在寻找一位经验丰富的高级全栈工程师，加入我们的技术团队，负责公司核心产品的开发和维护。</p>

                            <h4>主要职责</h4>
                            <ul>
                                <li>参与产品需求分析和技术方案设计</li>
                                <li>负责前后端功能的开发和优化</li>
                                <li>编写高质量、可维护的代码</li>
                                <li>参与代码审查和技术文档编写</li>
                                <li>协助团队解决技术难题和性能优化</li>
                            </ul>

                            <h4>职位要求</h4>
                            <ul>
                                <li>5年以上全栈开发经验</li>
                                <li>精通React/Vue等前端框架</li>
                                <li>熟悉Node.js/Python等后端技术</li>
                                <li>掌握数据库设计和优化</li>
                                <li>具备良好的团队协作和沟通能力</li>
                            </ul>

                            <h4>加分项</h4>
                            <ul>
                                <li>有微服务架构经验</li>
                                <li>熟悉Docker和Kubernetes</li>
                                <li>有大型项目开发经验</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 职位2 -->
                <div class="job-item neu-card" data-category="product">
                    <div class="job-info">
                        <h3>产品经理</h3>
                        <div class="job-meta">
                            <span class="job-tag job-department">产品部</span>
                            <span class="job-tag">上海</span>
                            <span class="job-tag job-type">全职</span>
                            <span>发布日期: 2023-10-10</span>
                        </div>
                        <p>负责企业级产品的规划和管理，将客户需求转化为创新产品功能。</p>
                    </div>
                    <div class="job-actions">
                        <button class="neu-button view-details" data-job="job2">查看详情</button>
                        <button class="neu-button secondary apply-now" data-job="job2">立即申请</button>
                    </div>
                    <div class="job-detail" id="job2">
                        <div class="job-description">
                            <h4>职位描述</h4>
                            <p>我们正在寻找一位有经验的产品经理，负责企业级数字化转型产品的规划和管理。</p>

                            <h4>主要职责</h4>
                            <ul>
                                <li>进行市场调研和竞品分析</li>
                                <li>定义产品路线图和功能规划</li>
                                <li>编写产品需求文档和用户故事</li>
                                <li>协调设计、开发和测试团队</li>
                                <li>跟踪产品数据并持续优化产品</li>
                            </ul>

                            <h4>职位要求</h4>
                            <ul>
                                <li>3年以上产品管理经验</li>
                                <li>熟悉敏捷开发流程</li>
                                <li>优秀的需求分析和文档编写能力</li>
                                <li>良好的沟通和团队协作能力</li>
                                <li>对企业数字化转型有深刻理解</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 职位3 -->
                <div class="job-item neu-card" data-category="design">
                    <div class="job-info">
                        <h3>UX/UI设计师</h3>
                        <div class="job-meta">
                            <span class="job-tag job-department">设计部</span>
                            <span class="job-tag">北京</span>
                            <span class="job-tag job-type">全职</span>
                            <span>发布日期: 2023-10-05</span>
                        </div>
                        <p>负责公司产品的用户体验和界面设计，创造直观易用的数字产品。</p>
                    </div>
                    <div class="job-actions">
                        <button class="neu-button view-details" data-job="job3">查看详情</button>
                        <button class="neu-button secondary apply-now" data-job="job3">立即申请</button>
                    </div>
                    <div class="job-detail" id="job3">
                        <div class="job-description">
                            <h4>职位描述</h4>
                            <p>我们正在寻找一位有才华的UX/UI设计师，加入我们的设计团队，负责创建优秀的用户体验。</p>

                            <h4>主要职责</h4>
                            <ul>
                                <li>进行用户研究和需求分析</li>
                                <li>设计用户流程和交互原型</li>
                                <li>创建高质量的UI设计</li>
                                <li>与开发团队协作确保设计实现</li>
                                <li>参与设计评审和用户测试</li>
                            </ul>

                            <h4>职位要求</h4>
                            <ul>
                                <li>3年以上UX/UI设计经验</li>
                                <li>精通Figma、Sketch等设计工具</li>
                                <li>熟悉用户体验设计原则</li>
                                <li>有前端开发基础知识者优先</li>
                                <li>具备良好的审美和创新能力</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 职位4 -->
                <div class="job-item neu-card" data-category="business">
                    <div class="job-info">
                        <h3>商务拓展经理</h3>
                        <div class="job-meta">
                            <span class="job-tag job-department">商务部</span>
                            <span class="job-tag">深圳</span>
                            <span class="job-tag job-type">全职</span>
                            <span>发布日期: 2023-09-28</span>
                        </div>
                        <p>负责拓展企业客户，建立和维护客户关系，推动业务增长。</p>
                    </div>
                    <div class="job-actions">
                        <button class="neu-button view-details" data-job="job4">查看详情</button>
                        <button class="neu-button secondary apply-now" data-job="job4">立即申请</button>
                    </div>
                    <div class="job-detail" id="job4">
                        <div class="job-description">
                            <h4>职位描述</h4>
                            <p>我们正在寻找一位有经验的商务拓展经理，负责拓展企业客户和推动业务增长。</p>

                            <h4>主要职责</h4>
                            <ul>
                                <li>识别和开发潜在客户</li>
                                <li>建立和维护客户关系</li>
                                <li>制定和执行销售策略</li>
                                <li>协调内部资源完成项目交付</li>
                                <li>跟踪行业动态和竞争情况</li>
                            </ul>

                            <h4>职位要求</h4>
                            <ul>
                                <li>5年以上B2B销售经验</li>
                                <li>熟悉企业软件或数字化转型领域</li>
                                <li>优秀的沟通和谈判能力</li>
                                <li>具备客户关系管理经验</li>
                                <li>能够适应出差</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pagination">
                <button class="page-btn active">1</button>
                <button class="page-btn">2</button>
                <button class="page-btn">3</button>
                <button class="page-btn">下一页</button>
            </div>
        </section>

        <section id="application-form" style="display: none;">
            <h2 class="section-title">职位申请</h2>
            <div class="application-form neu-card">
                <form id="job-application">
                    <div class="form-group">
                        <label for="applicant-name">姓名</label>
                        <input type="text" id="applicant-name" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="applicant-email">邮箱</label>
                        <input type="email" id="applicant-email" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="applicant-phone">电话</label>
                        <input type="tel" id="applicant-phone" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label for="applicant-position">申请职位</label>
                        <input type="text" id="applicant-position" class="form-control" readonly>
                    </div>

                    <div class="form-group">
                        <label for="applicant-resume">简历上传</label>
                        <div class="file-upload">
                            <input type="file" id="applicant-resume" class="file-upload-input" accept=".pdf,.doc,.docx"
                                required>
                            <label for="applicant-resume" class="file-upload-label">选择文件</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="applicant-coverletter">求职信</label>
                        <textarea id="applicant-coverletter" class="form-control"
                            placeholder="请简要介绍您的经验和为什么适合这个职位..."></textarea>
                    </div>

                    <div style="text-align: center; margin-top: 30px;">
                        <button type="submit" class="neu-button accent">提交申请</button>
                        <button type="button" class="neu-button secondary" id="cancel-application"
                            style="margin-left: 15px;">取消</button>
                    </div>
                </form>
            </div>
        </section>

        <footer id="contact">
            <div class="logo">创界科技</div>
            <div class="footer-links">
                <a href="index.html">首页</a>
                <a href="about.html">关于我们</a>
                <a href="products.html">产品</a>
                <a href="services.html">服务</a>
                <a href="news.html">新闻动态</a>
                <a href="team.html">团队</a>
                <a href="careers.html">招聘</a>
                <a href="index.html#contact">联系我们</a>
            </div>
            <p>地址：北京市海淀区科技园区创新大厦15层</p>
            <p>电话：010-12345678 | 邮箱：contact@chuangjie-tech.com</p>
            <p style="margin-top: 20px;">© 2023 创界科技 | 创新驱动未来</p>
        </footer>
    </div>

    <script>
        // 职位筛选功能
        document.addEventListener('DOMContentLoaded', function () {
            const filterBtns = document.querySelectorAll('.filter-btn');
            const jobItems = document.querySelectorAll('.job-item');

            filterBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    // 更新按钮状态
                    filterBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');

                    const filter = this.getAttribute('data-filter');

                    // 筛选职位
                    jobItems.forEach(item => {
                        if (filter === 'all' || item.getAttribute('data-category') === filter) {
                            item.style.display = 'grid';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });

            // 职位详情展开/收起
            const viewDetailsBtns = document.querySelectorAll('.view-details');
            viewDetailsBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    const jobId = this.getAttribute('data-job');
                    const jobDetail = document.getElementById(jobId);

                    // 关闭所有其他详情
                    document.querySelectorAll('.job-detail').forEach(detail => {
                        if (detail.id !== jobId) {
                            detail.classList.remove('active');
                        }
                    });

                    // 切换当前详情
                    jobDetail.classList.toggle('active');

                    // 更新按钮文本
                    if (jobDetail.classList.contains('active')) {
                        this.textContent = '收起详情';
                    } else {
                        this.textContent = '查看详情';
                    }
                });
            });

            // 申请职位功能
            const applyNowBtns = document.querySelectorAll('.apply-now');
            const applicationForm = document.getElementById('application-form');
            const applicantPosition = document.getElementById('applicant-position');
            const cancelApplication = document.getElementById('cancel-application');
            const jobApplication = document.getElementById('job-application');

            applyNowBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    const jobId = this.getAttribute('data-job');
                    const jobItem = document.getElementById(jobId).closest('.job-item');
                    const jobTitle = jobItem.querySelector('h3').textContent;

                    // 设置申请职位
                    applicantPosition.value = jobTitle;

                    // 显示申请表单
                    applicationForm.style.display = 'block';

                    // 滚动到表单
                    applicationForm.scrollIntoView({ behavior: 'smooth' });
                });
            });

            // 取消申请
            cancelApplication.addEventListener('click', function () {
                applicationForm.style.display = 'none';
                jobApplication.reset();
            });

            // 表单提交
            jobApplication.addEventListener('submit', function (e) {
                e.preventDefault();

                // 这里应该发送表单数据到服务器
                alert('申请已提交！我们会尽快与您联系。');
                applicationForm.style.display = 'none';
                jobApplication.reset();
            });

            // 搜索功能
            const searchButton = document.querySelector('.search-button');
            searchButton.addEventListener('click', function () {
                const searchInput = document.querySelector('.search-input');
                const searchTerm = searchInput.value.trim().toLowerCase();

                if (searchTerm) {
                    jobItems.forEach(item => {
                        const jobTitle = item.querySelector('h3').textContent.toLowerCase();
                        const jobDescription = item.querySelector('p').textContent.toLowerCase();

                        if (jobTitle.includes(searchTerm) || jobDescription.includes(searchTerm)) {
                            item.style.display = 'grid';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                }
            });

            // 回车键搜索
            const searchInput = document.querySelector('.search-input');
            searchInput.addEventListener('keypress', function (e) {
                if (e.key === 'Enter') {
                    searchButton.click();
                }
            });

            // 分页功能
            const pageBtns = document.querySelectorAll('.page-btn');
            pageBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    if (!this.classList.contains('active')) {
                        pageBtns.forEach(b => b.classList.remove('active'));
                        this.classList.add('active');
                        // 实际应用中这里应该加载对应页面的数据
                        alert('加载第 ' + this.textContent + ' 页数据');
                    }
                });
            });
        });
    </script>
</body>

</html>